CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
myte
myte

Reputation: 877

Bootstrap 3 Moving Items Between Rows in Grid

I'm trying to make my layout move items between rows and the grid system is doing my head in with this!

at medium and above i want it to look like this

+---+-------+
| A |   B   |
|   |-------+
|   | C | D |
+---+---+---+

then at a smaller resolution i want it like this

+-------+
|   C   |
+-------+
|   B   |
+-------+
| A | D |
+---+---+

I've been trying with some nested rows but am getting stuck with the concept of how they shift based on the different sizes (sm, md etc.)

Upvotes: 0

Views: 803

Answers (1)

bep42
bep42

Reputation: 351

You can also use the hidden and visible class. Take a look at .visible and .hidden on getbootstrap.com

So, you can imagine to organize your content as you need in your HTML file like this :

.cola { background:red; height:100px;}
.colb { background:grey; height:100px;}
.colc { background:green; height:100px;}
.cold { background:yellow; height:100px;}
<head>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<body>

    <div class="container">
        <div class="row visible-md visible-lg"> <!-- visible only on medium and large devices -->
          
          <div class="col-md-6 cola">col A</div>
          <div class="col-md-6 row">
            <div class="col-md-12 colb">col B</div>
            <div class="col-md-6 colc">col C</div>
            <div class="col-md-6 cold">col D</div>
          </div>
                        
        </div><!-- end row -->
      
      <div class="row visible-xs visible-sm"> <!-- visible only on small and extra-small devices -->
          
          <div class="col-xs-12 colc">col C</div>
          <div class="col-xs-12 colb">col B</div>
          <div class="col-xs-6 cola">col A</div>
          <div class="col-xs-6 cold">col D</div>
                        
        </div><!-- end row -->
      
     </div><!-- end container -->
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
      
</body>

Upvotes: 1

Related Questions