CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3responsive-design
Bryan Miller
Bryan Miller

Reputation: 3323

how to reorder a bootstrap responsive layout

How can I accomplish the following layout, so that on mobile-sized screens (xs columns) we have the below:

enter image description here

but on non-xs columns we have:

enter image description here

Note that block #3 has to be pulled up to be right below block #1 on non-xs sizes (which means it probably can't share the same row as block #4). Here's the closest I can get given the above constraint:

<div class="container">
<div class="row">
    <div class="col-sm-9" style="background-color:yellow;">
      Block #2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      Block #1 - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
    <div class="col-sm-9" style="background-color:yellow;">
      Block #4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div class="col-sm-3" style="background-color:pink;">
      Block #3 - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
  </div>
</div>

Upvotes: 1

Views: 582

Answers (2)

TheRedstoneTaco
TheRedstoneTaco

Reputation: 311

Well, you can serve two different webpages with jQuery!

// on page load, determine h/w ratio to determine whether mobile device
// or not and redirect accordingly
$(document).ready(function() {
  let h = window.screen.height;
  let w = window.screen.width;
  // for mobile resolutions
  if ((h/w) > 1.0) {
    window.location.replace("www.example1.com");
  } 
  // for non-mobile resolutions
  else {
    window.location.replace("www.example2.com");
  }
});

Upvotes: 0

doppler
doppler

Reputation: 883

The example you provided defies the nature of the single dimension grid that flex was intended for. I would recommend that you use css grid if you wish to create a template that accepts responsive, 2-dimensional layouts like your example.

If you want to come close to your example, you can set the flex order to reverse https://getbootstrap.com/docs/4.0/utilities/flex/#direction.

Then you can include classes for each media query:

<div class="container">
    <div class="row flex-row-reverse">
        <div class="col-xs-12 col-sm-3">1</div>
        <div class="col-xs-12 col-sm-9">2</div>
        <div class="col-xs-12 col-sm-3">3</div>
        <div class="col-xs-12 col-sm-9">4</div>
    </div>
</div>

Try it out by resizing your browser:

Upvotes: 1

Related Questions