bootstrap multiple text columns

Issue

i am trying to make a responsive multi column text aria with bootstrap. i tried looking online but could not find what i need.

this is an example of what i am trying to do, but i would like to make it responsive that with the screen gets small everything should be on one column http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-rule-width

any pointers will be very much appreciated. thank you.

Solution

Use CSS media queries to adjust properties for screen width. Example of your solution

@media (min-width: 1200px) {
    .example {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
      -webkit-column-gap: 3em;
      -moz-column-gap: 3em;
      column-gap: 3em;
    }
  }

@media (min-width: 600px) and (max-width: 1200px) {
  .example {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

@media (max-width: 600px) {
  .example {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

Answered By - Olexandr Petrov