Trying to understand how to use Bootstrap Row/Columns?

Question

I am trying to make it so on a large screen there are 4 columns, a medium screen there are 2 and on an extra small screen just 1. The large and extra small work, but I'm assuming the medium does not simply because col-6 4 times would make it 24 instead of 12 columns. Here is my code:

<div class="row">
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
            <div class="col-xs-12 col-med-6 col-lg-3">
                <img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
            </div>
</div>

How would I be able to make this work so that the medium column only has 2 columns?

Answer 1

You've used wrong class for medium screen size. It should be col-md-6 instead of col-med-6

And if you declare 4 columns of col-md-6, it will rearrange the columns such that the first two (total of 12) will occupy the first row and the next two will be arranged in the second row.

Answer 2

Your approach is correct, you only got the medium column classname wrong, it should be: col-md-6. (Bootstrap docs)

Answer 3

It is col-md-6 not col-med-6. Please fix this class name, then it will work.

Answer 4

Here you go with a solution https://jsfiddle.net/8er0e3Lh/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <img src="http://via.placeholder.com/350x15">
    </div>
  </div>
</div>

Order of class should be from lower screen to larger screen.

Hope this will help you.