Trewq Trewq - 5 months ago 12
CSS Question

Controlling bootstrap row order in mobile only

I have some simple html at this fiddle that shows the the following in a wide desktop (simple row stuff and this is the desired behavior I want):

sdf

Here is the code that produces the above output:

<div class="container">
<div class="row">
<div class="col-md-4"><img class="img-responsive" src="http://placehold.it/800x400"></div>
<div class="col-md-8">
<h1>Random decisions for emacs, with functions and a minor mode.</h1>
<p>Random decisions for emacs, with functions and a minor mode.
Roll various types of dice, generate random numbers from
</p>
</div>
</div>




In mobile (when I reduce the width of the page), I see this:

mobile

What I want to see instead is the header ("Random decisions..") show up above the pic in mobile only (Do not want to change anything in the desktop). It seems like I am changing the order of the rows in mobile, but I would like some direction on how I could go about doing this in a clean fashion.

Answer

You can use Bootstraps Push/Pull classes. You need to reorder your content so your image is second in your stack (Bootstrap is mobile first) so when on mobile your image starts below the header then shifts to the left as you expand the viewport.

See Column Reordering

Working Example;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-md-8 col-md-push-4">
      <h1>Random decisions for emacs, with functions and a minor mode.</h1>
      <p>Random decisions for emacs, with functions and a minor mode. Roll various types of dice, generate random numbers from
      </p>
    </div>


    <div class="col-md-4 col-md-pull-8">
      <img class="img-responsive" src="http://placehold.it/800x400">
    </div>

  </div>
</div>

Comments