title: Mobile Responsive Divs
body: <p>I have created 3 divs that line side-by-side on 1 row on desktop view but I would like each div to stack vertically on mobile devices only. I can't seem to figure out the correct CSS code/media query for this.</p>
  
  <p>This is the HTML div code I'm using in the body of the post:</p>
  
  <pre><code>  &lt;div style="float: left; width: 30%; margin-right: 5px;"&gt;
      SOURCE 1
      &lt;div style="float: left; width: 30%; margin-right: 5px;"&gt;
      SOURCE 2
      &lt;div style="float: left; width: 30%; margin-right: 5px;"&gt;
      SOURCE 3
  </code></pre>
  
  <p>Here is the full HTML code--I am embedding 3 Instagram photos.</p>
  
  <pre><code>   div style="float: left; width: 30%; margin-right: 3px;"&gt;
  
      blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6"&gt;
  
      div style="padding: 1px;"&gt;
  
      div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"&gt;&lt;/div&gt;
  
      a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BC2kmbmhTOY/" target="_blank"&gt;#CherryBlossom #Doughnuts: Vanilla Cream Cheese Glaze w/ a #Cherry Filling, and featuring a #CherryBlossomTree design made with Chocolate (tree) and Cherry Buttercream Flowers Available Soon! March 15 to April 17.&lt;/a&gt;
  
      A photo posted by Astro Doughnuts (@astrodoughnuts) on &lt;time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-12T12:17:51+00:00"&gt;Mar 12, 2016 at 4:17am PST&lt;/time&gt;
  
      /div&gt;&lt;/blockquote&gt;
  
      script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"&gt;
  
      /script&gt;
  
      /div&gt;
  
      div style="float: left; width: 30%; margin-right: 3px;"&gt;
  
      blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6"&gt;
  
      div style="padding: 1px;"&gt;
  
      div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"&gt;&lt;/div&gt;
  
      a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BCq4otrp-ZW/" target="_blank"&gt;Spring truly arrives when flowers start blooming, and our #CherryBlossom macaron has certainly begun showing its petals! Sweet and subtle, it's the perfect spring bite. #oliviamacaron #frenchmacarons #springtime #GeorgetownDC #ShopTysons #DCeats&lt;/a&gt;
  
  A photo posted by Olivia Macaron (@oliviamacaron) on &lt;time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-07T23:22:02+00:00"&gt;Mar 7, 2016 at 3:22pm PST&lt;/time&gt;
  
  /div&gt;
  
  /blockquote&gt;
  
  script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"&gt;
  
  /script&gt;
  
  /div&gt;
  
  div style="float: left; width: 30%; margin-left: 3x;"&gt;
  
  blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="6"&gt;
  
  div style="padding: 1px;"&gt;
  
  div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50.0% 0; text-align: center; width: 100%;"&gt;&lt;/div&gt;
  
  a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BDJCBpnAi8f/" target="_blank"&gt; Happy Saturday! &lt;/a&gt;
  
  A photo posted by Georgetown Cupcake (@georgetowncupcake) on &lt;time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-03-19T16:21:18+00:00"&gt;Mar 19, 2016 at 9:21am PDT&lt;/time&gt;
  
  /div&gt;
  
  /blockquote&gt;
  
  script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"&gt;
  
  /script&gt;
  
  /div&gt;
  
  div style="clear: both; height: 1em;"&gt;&lt;/div&gt;
  </code></pre>