title: Making a grid system of images and text mobile responsive
body: <p>I have a container which has three rows and each rows has four columns.
  I am trying to make this responsive for mobile view but I am unable to do so.
  For mobile view I want the grid to have six rows instead of three and each row having two columns.
  And i have tried several ways by changing the css to get the view but i was'nt able to. Do i have to right another container in the react component for getting it or it can achieved using css?</p>
  <pre><code>&lt;Container  fluid={true} className='grid-container' style={{paddingLeft: '0px', paddingRight: '0px'}}&gt;
                                 &lt;Row noGutters &gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={first} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;21st century&lt;br/&gt; skills providing&lt;br/&gt; holistic growth.&lt;/div&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={second} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;World's best&lt;br/&gt; educators.&lt;/div&gt;&lt;/Col&gt;
                                  &lt;/Row&gt;
                                 &lt;Row noGutters&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;Masterclass,&lt;br/&gt; Live Projects,&lt;br/&gt;Hackathons,etc.&lt;/div&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={third} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;All under one&lt;br/&gt; subscription.&lt;/div&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={fourth} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                 &lt;/Row&gt;
                                 &lt;Row noGutters&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={fifth} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;Start learning with&lt;br/&gt; students all around the world.&lt;/div&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;img src={sixth} className=&quot;grid-images&quot;/&gt;&lt;/Col&gt;
                                      &lt;Col className=&quot;grid-col&quot;&gt;&lt;div className=&quot;grid-text&quot;&gt;Learn at your own&lt;br/&gt; pace.&lt;/div&gt;&lt;/Col&gt;
                                 &lt;/Row&gt;
                           &lt;/Container&gt;
  </code></pre>
  <p>The css for this component is</p>
  <pre><code>.grid-container{
      background: linear-gradient(-45deg,  #ee7752, #2746d1, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 8s ease infinite;
      
  }
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
  .grid-col{
      display:flex;
  }
  
  .grid-text{
      display:inline-block;
      align-self: flex-end;
      padding-left:10px;
      font-size: 200%;
  }
  
  .grid-images{
      width:100%;
   }
  </code></pre>