title: Bootstrap 4 col-md
body: <p>I am having particular difficulty in defining a col-md size for my columns, I need my 6 images which are 2 rows 3 images in each row at the size lg-4 on desktop mode and I have defined an xs-12 so that it will stack on top of each other in mobile mode and tablet mode, and now I need a size for the md in my column which must make 3 rows 2 images in each row, this is my first question on StackOverflow so please forgive me if I have not been clear enough in anything. Have a nice day! This problem was solved thank you!. I moved all the columns into 1 row. Here is my code:</p>
  <pre><code>&lt;div id=&quot;projectSection&quot;&gt;
    &lt;h1&gt;My Latest Projects&lt;/h1&gt;
    &lt;div id=&quot;projectsContainer&quot; class=&quot;container&quot;&gt;
      &lt;div class=&quot;row mr-auto&quot;&gt;
        &lt;div class=&quot;col-xs-12 col-md-6 col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-1.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-xs-12 col-md6- col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-2.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-xs-12 col-md-6 col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-3.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-xs-12 col-md-6 col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-4.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-xs-12 col-md-6 col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-5.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-xs-12 col-md-6 col-lg-4&quot;&gt;
          &lt;img src=&quot;/PROJECT-2/Images/idProject-6.jpg&quot; alt=&quot;Project-1&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>