CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Di437
Di437

Reputation: 183

How do I stack bootstrap grid columns one below the other instead of one beside another?

I am just beginning to learn Bootstrap and I came across the grid system. I was playing around and noticed that the grid columns always start from the left and go towards the right, placing the divs one beside another. How do I make them appear one below the other? Here's some sample code:

<body>

<div class="container-fluid">
  <h2>Three Equal Columns</h2>
  <div class="row">
    <div class="col-4 bg-success">.col-1</div>
    <div class="col-4 bg-warning">.col-2</div>
    <div class="col-4 bg-success">.col-3</div>
  </div>
</div>

</body>

Here's a fiddle. https://jsfiddle.net/txdqjf8b/2/

How do I make col-1, col-2 and col-3 appear one below the other, so that later if I have a col-4, col-5 and col-6, I want them like this:

col-1    col-4    col-7
col-2    col-5    col-8 
col-3    col-6    col-9

Upvotes: 3

Views: 5770

Answers (5)

Mauricio Paz
Mauricio Paz

Reputation: 107

For googlers: If you want to do this without Bootstrap, or if you are using Bootstrap 3, you can simply use a display: grid, using grid-auto-flow: column.

I created an example, you can check here:

.grid-rows {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
}

codepen.io/mauricio-paz/pen/RwNPqyM

Upvotes: -1

Lucid Polygon
Lucid Polygon

Reputation: 572

This will work for you. 

<div class="row">
  <div class="col-4 bg-success">.col-1</div>
</div>
<div class="row">
  <div class="col-4 bg-warning">.col-2</div>
</div>
<div class="row">
  <div class="col-4 bg-success">.col-3</div>
</div>

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

In bootstrap 4, there is a option of ordering your elements using order-lg/md/sm/xs-1 like below.

<div class="col-md-4 order-md-1 bg-success">.col-1</div> 
<div class="col-md-4 order-md-4 bg-warning">.col-2</div> 
<div class="col-md-4 order-md-7 bg-success">.col-3</div>
<div class="col-md-4 order-md-2 bg-success">.col-4</div> 
<div class="col-md-4 order-md-5 bg-warning">.col-5</div> 
<div class="col-md-4 order-md-8 bg-success">.col-6</div>
<div class="col-md-4 order-md-3 bg-success">.col-7</div> 
<div class="col-md-4 order-md-6 bg-warning">.col-8</div> 
<div class="col-md-4 order-md-9 bg-success">.col-9</div>

I have updated your fiddle. Here is the DEMO

You can get more clarity in docs https://v4-alpha.getbootstrap.com/utilities/flexbox/#order

The above code I have done it for applying only medium size screens. Like that way you can decide your order for large and small screen. Suppose if you want to apply commonly then use order-1 like below.

<div class="col-4 order-1 bg-success">.col-1</div> 
<div class="col-4 order-4 bg-warning">.col-2</div> 
<div class="col-4 order-7 bg-success">.col-3</div>
<div class="col-4 order-2 bg-success">.col-4</div> 
<div class="col-4 order-5 bg-warning">.col-5</div> 
<div class="col-4 order-8 bg-success">.col-6</div>
<div class="col-4 order-3 bg-success">.col-7</div> 
<div class="col-4 order-6 bg-warning">.col-8</div> 
<div class="col-4 order-9 bg-success">.col-9</div>

Here is the DEMO

Upvotes: 3

Shell
Shell

Reputation: 6849

There is a feature in CSS3 when you can define an element with multiple columns. But, I don't think that all the browser supports this feature.

Or it may conflict with the bootstrap css.

-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;


.row {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.col{
	width: 200px;
    height: 50px;
    border: 1px solid black;
}
<div class="row">
	<div class="col">col 1</div>
    <div class="col">col 2</div>
    <div class="col">col 3</div>
    <div class="col">col 4</div>
    <div class="col">col 5</div>
    <div class="col">col 6</div>
</div>

https://www.w3.org/TR/css-multicol-1/

https://www.w3schools.com/css/tryit.asp?filename=trycss3_column-count

Upvotes: 0

Ishwar Deoolkar
Ishwar Deoolkar

Reputation: 10

<div class="row">
 <div class="col-md-4 col-lg-4 col-sm-4">
   <div class="row">
     <div class="col-md-12 bg-success">col-1</div>
   </div>
   <div class="row">
     <div class="col-md-12 bg-success">col-2</div>
   </div>
   <div class="row">
     <div class="col-md-12 bg-success">col-3</div>
   </div>
 </div>
 <div class="col-md-4 col-lg-4 col-sm-4">
    <div class="row">
     <div class="col-md-12 bg-success">col-4</div>
    </div>
    <div class="row">
     <div class="col-md-12 bg-success">col-5</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-6</div>
    </div>
 </div>
 <div class="col-md-4 col-lg-4 col-sm-4">
    <div class="row">
      <div class="col-md-12 bg-success">col-7</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-8</div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-success">col-9</div>
    </div>
 </div>
</div>

Upvotes: 0

Related Questions