Css3 Multi-Column with column-count in Bootstrap

Question

I want to have a layout that work like the css3 multicolumn with column-count: 4 functionality in such that the layout is fluid. My layout is as folowing: for small device:

control1
control2
control3
control4

For bigger device: (look a the order)

control1  control3
control2  control4

Then for extra big screen i could have

control1  control2  control3  control4

This keeps the order of the control so that if i want to use my existing keys (tab index) it works perfectly.

Please look in explorer how this work with css3

JS Fiddle

Answer 1

You can define all this using the grid system right: Here. defining the screen size: xs: extra-small, sm: small and md: for medium, lg: for large. Right now i just decided to use sm: for small device, lg for extra big screen in your case, nest the columns

<div class="row">
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control1</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control2</div>
  </div>
  <div class="col-md-6 col-lg-6 col-sm-12">
    <div class="col-md-12 col-lg-6 col-sm-12">control3</div>
    <div class="col-md-12 col-lg-6 col-sm-12">control4</div>
  </div>
</div>

Answer 2

Pure css option here I would not recomment to use table tags anymore, you can better manipulate tables with "display: table" and change it for a different view as you desire. tables without table

.container {
  column-width: 280px;
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
}
@media (max-width: 800px) {
  .container {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
  }
}
@media (max-width: 500px) {
  .container {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
  }
}

.table {
  display: table;
}

.table-row {
  display: block;
}

.table-cell {
  display: inline;
}

<div class="container">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">Label1</div>
      <div class="table-cell">Editor1</div>
      <div class="table-cell">Description1</div>
    </div>
    <div  class="table-row">
      <div class="table-cell">Label2</div>
      <div class="table-cell">Editor2</div>
      <div class="table-cell">Description2</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label3</div>
      <div class="table-cell">Editor3</div>
      <div class="table-cell">Description3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Label4</div>
      <div class="table-cell">Editor4</div>
      <div class="table-cell">Description4</div>
    </div>
  </div>
</div>