Arrange column order based on screen size variations

Question

Arrange column order based on screen size variations

Can Bootstrap or Foundation be used to create this specific layout?

Do you notice the challenge here? The top column needs to switch to the bottom on tablets. The Push/Pull method won't work in this situation as it requires a different type of column reordering.

Any creative solutions come to mind?

html css twitter-bootstrap responsive-design zurb-foundation

Answer 1

Answer №1

The implementation of the CSS `order` property is essential when working with flex-boxes.

For a detailed guide on using the `order` property, visit: https://example.com/css-order-guide

To ensure browser compatibility before using the `order` property, refer to this link:

Answer 2

The implementation of the CSS `order` property is essential when working with flex-boxes.

For a detailed guide on using the `order` property, visit: https://example.com/css-order-guide

To ensure browser compatibility before using the `order` property, refer to this link:

Answer 3

Answer №2

Utilizing Foundation's size-push-units and size-pull-units classes allows you to fine-tune the positioning of elements based on column units. For instance, using .small-push-10 or .large-pull-7 can adjust the layout by a specified number of columns. It is important to remember to set the opposite classes on relevant elements for proper alignment. In a scenario where each box is 12 columns wide, the green box would have the class small-push-24 (reflecting the total width of all elements pushed past) while the yellow boxes would have small-pull-12 (indicating the width of the pushing element).

For further information, refer to the "Source Ordering" section in the documentation available at

Answer 4

Utilizing Foundation's size-push-units and size-pull-units classes allows you to fine-tune the positioning of elements based on column units. For instance, using .small-push-10 or .large-pull-7 can adjust the layout by a specified number of columns. It is important to remember to set the opposite classes on relevant elements for proper alignment. In a scenario where each box is 12 columns wide, the green box would have the class small-push-24 (reflecting the total width of all elements pushed past) while the yellow boxes would have small-pull-12 (indicating the width of the pushing element).

For further information, refer to the "Source Ordering" section in the documentation available at

Answer 5

Answer №3

Here is my best attempt at achieving a similar layout: check out example #1.

Whenever I need to arrange columns vertically, I simply assign them a size of 12 (refer to example #2) and let Bootstrap handle the rest. Unfortunately, this approach doesn't seem to work with nested columns. Good luck with your project!

Answer 6

Here is my best attempt at achieving a similar layout: check out example #1.

Whenever I need to arrange columns vertically, I simply assign them a size of 12 (refer to example #2) and let Bootstrap handle the rest. Unfortunately, this approach doesn't seem to work with nested columns. Good luck with your project!

Answer 7

Answer №4

When it comes to dealing with IE8 Support limitations, you have a few options at your disposal:

1.) If the content within these blocks is static (meaning it will stay the same height), you can manipulate the layout using negative margins as a workaround. Check out this example: http://codepen.io/username123/pen/randomlink123

@media screen and (max-width: 600px) {
 .greenTop {margin-top:260px;}
 .yellow1 {margin-top:-360px;}
}

2.) If the green area block isn't too intricate, you might consider duplicating it on the page and toggling visibility based on media queries. Take a look at this demo: http://codepen.io/username123/pen/differentlink456

.greenTop {display:none;}

@media screen and (min-width: 600px) {
  .greenTop {display:block;}
  .greenBottom {display:none;}
}

(Both of these methods may require something like respond.js to ensure proper functionality in IE8 with media queries. Check out more information here: http://getbootstrap.com/getting-started/#support-ie8-ie9)

Answer 8

When it comes to dealing with IE8 Support limitations, you have a few options at your disposal:

1.) If the content within these blocks is static (meaning it will stay the same height), you can manipulate the layout using negative margins as a workaround. Check out this example: http://codepen.io/username123/pen/randomlink123

@media screen and (max-width: 600px) {
 .greenTop {margin-top:260px;}
 .yellow1 {margin-top:-360px;}
}

2.) If the green area block isn't too intricate, you might consider duplicating it on the page and toggling visibility based on media queries. Take a look at this demo: http://codepen.io/username123/pen/differentlink456

.greenTop {display:none;}

@media screen and (min-width: 600px) {
  .greenTop {display:block;}
  .greenBottom {display:none;}
}

(Both of these methods may require something like respond.js to ensure proper functionality in IE8 with media queries. Check out more information here: http://getbootstrap.com/getting-started/#support-ie8-ie9)

Answer 9

Answer №5

Richard Collins, Hey there, take a look at this Fiddle. I utilized Bootstrap and some media query breakpoints to achieve this effect with show/hide features. No push/pull techniques or negative margin values involved, just a simple approach.

For a larger view of the Fiddle, click here.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
		    ... (The content continues) ...
</html>

Answer 10

Richard Collins, Hey there, take a look at this Fiddle. I utilized Bootstrap and some media query breakpoints to achieve this effect with show/hide features. No push/pull techniques or negative margin values involved, just a simple approach.

For a larger view of the Fiddle, click here.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
		    ... (The content continues) ...
</html>

Answer 11

Answer №6

Implementing this layout in Foundation involves utilizing nested columns and specific ordering classes. It's important to note that hidden columns need to be the same height as the visible blocks.

<div class="row">
    <div class="large-8 medium-12 columns gr">
        -
    </div>
    <div class="large-4 large-reset-order medium-6 medium-push-6 small-6 small-push-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 medium-push-12 small-12 small-push-12 columns gre">
                green
            </div>
        </div>
    </div>
    <div class="large-4 medium-6 medium-pull-12 small-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns ye">
                1
            </div>
            <div class="large-12 medium-12 small-12 columns ye">
                2 
            </div>
        </div>
    </div>
</div>

Check out the demonstration here:

Answer 12

Implementing this layout in Foundation involves utilizing nested columns and specific ordering classes. It's important to note that hidden columns need to be the same height as the visible blocks.

<div class="row">
    <div class="large-8 medium-12 columns gr">
        -
    </div>
    <div class="large-4 large-reset-order medium-6 medium-push-6 small-6 small-push-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 small-12 columns hide-for-large-only hide-for-xlarge-only">
                &nbsp;
            </div>
            <div class="large-12 medium-12 medium-push-12 small-12 small-push-12 columns gre">
                green
            </div>
        </div>
    </div>
    <div class="large-4 medium-6 medium-pull-12 small-6 columns">
        <div class="row">
            <div class="large-12 medium-12 small-12 columns ye">
                1
            </div>
            <div class="large-12 medium-12 small-12 columns ye">
                2 
            </div>
        </div>
    </div>
</div>

Check out the demonstration here:

Arrange column order based on screen size variations

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Identifying page elements in Protractor when they lack obvious identifiable properties

Beginning AngularJS by implementing the ng-controller directive

Enjoy a fullscreen Youtube video embed with autoplay using Bootstrap's modal feature

Preventing the stacking of numerous animations triggered by jquery events

Struggling to align button text vertically in the center

`There are two text boxes in a blog post editor within tinyMCE`

Using Four Different Colour Borders in CSS

What steps should I take to properly align these product cards in a grid layout?

Capture all div elements from the table and store them in an array

Show and hide HTML div elements dynamically using jQuery based on the selection from a dropdown

Connection between overlay div and corresponding destination div address

Are there any "Undefined" tabs hiding in your RMarkdown tabsets?

How can you deactivate all form elements in HTML except for the Submit button?

Applying a filter within an ng-repeat loop to act as a conditional

"Web fonts without a content delivery network (CDN)

What is the process for converting x and y coordinates to align with a fixed display?

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Designing websites using elements that float to the right in a responsive manner

My mobile website, built using Bootstrap, appears as if it is zoomed

Update the menu-link class to active for a single-page website