1

I need to reorder these columns in a certain order for screens smaller the col-md in bootstrap. I tried this answer Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and it works for just 3 columns but not for the specific way the columns need to stack in mobile view. This way works but it feels dirty hiding and un-hiding the columns. Is there a cleaner way to accomplish this?

Desktop View here enter image description here

Mobile View here enter image description here

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
  <div class="container">
  <div class="row">
    <div class="col-md-12 visible-md visible-lg">
      <div class="col-md-4"><div class="well">1</div></div>
      <div class="col-md-4"><div class="well">2</div></div>
      <div class="col-md-4"><div class="well">ad1</div></div>
      <div class="col-md-4"><div class="well">3</div></div>
      <div class="col-md-4"><div class="well">4</div></div>
      <div class="col-md-4"><div class="well">ad2</div></div>
      <div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div>
    </div>
    <!--col-md-12 visible-md visible-lg -->

    <div class="col-xs-12 visible-xs visible-sm">
        <div class="col-xs-12"><div class="well">ad1</div></div>
        <div class="col-xs-12"><div class="well">1</div></div>
        <div class="col-xs-12"><div class="well">ad2</div></div>
        <div class="col-xs-12"><div class="well">2</div></div>
        <div class="col-xs-12"><div class="well">3</div></div>
        <div class="col-xs-12"><div class="well">ad3</div></div>
        <div class="col-xs-12"><div class="well">4</div></div>
    </div>
    <!-- col-xs-12 visible-xs visible-sm -->

  </div>
  <!-- row -->
</div>
<!-- container -->
</body>
</html>

Codepen here

Community
  • 1
  • 1
MoxDev
  • 51
  • 1
  • 8
  • Hi Pamblam I tried this solution and it works for 3 columns but I couldnt get it to work in the specific order I need them to show up in mobile view. If you take a look at the screenshots they need to be in a very specific order. – MoxDev May 05 '16 at 20:02

1 Answers1

1

Please check:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row hidden-xs hidden-sm">
    <div class="col-md-8"><div class="well">728x90 Ad</div></div>
  </div>

  <div class="row">
    <div class="col-md-8"><div class="well">Title</div></div>
    <div class="col-md-4"><div class="well">ad1</div></div>
  </div>

  <div class="row">
    <div class="col-md-4"><div class="well">1</div></div>
    <div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div>
    <div class="col-md-4 col-md-pull-4"><div class="well">2</div></div>
  </div>

  <div class="row">
    <div class="col-md-4"><div class="well">3</div></div>
    <div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div>
    <div class="col-md-4 col-md-pull-4"><div class="well">4</div></div>
  </div>

</div> <!-- container -->
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
  • Brilliant my friend thank you. I tried something similar to that before just couldn't seem to it to order right. – MoxDev May 05 '16 at 20:23