title: Flexbox changing text and image position when on a certain width
body: <p>Okay guys I have a challenge, can't seem to figure it out.
  I have 3 images with text that have to show next to eachother, but when at screen (max-width: 768px) the images have to show under eachother with the 1st and 3rd image the text has to be to the right with image to the next and for the 2nd image the text to the left and image to the right.
  So like this: <a href="https://i.stack.imgur.com/BioOu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BioOu.jpg" alt="enter image description here" /></a></p>
  <p>ALSO: The images and text HAVE to be with a background colour, so i cant just put them in to one paragraph, they all have to be separate boxes!!</p>
  <p>I thought flexbox was the best solution but i'm just not getting in.
  Can someone help?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fish{
    grid-column: span 13;
    display: flex;
  }
  
  .fishpics{
    max-width: 100%;
    height: 200px;
  }
  
  figure{
    background-color: darkred;
    margin: 5px;
    flex-wrap: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>            &lt;div class="fish"&gt;
                  &lt;figure&gt;
                  &lt;img class="fishpics" src="img/fish1.jpg"&gt;
                  &lt;h3&gt;tekst&lt;/h3&gt;
                  &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?&lt;/p&gt;
                  &lt;/figure&gt;
                  &lt;figure&gt;
                  &lt;img class="fishpics" src="img/fish2.jpg"&gt;
                  &lt;h3&gt;tekst&lt;/h3&gt;
                  &lt;p class="pright"&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?&lt;/p&gt;
              &lt;/figure&gt;
              &lt;figure&gt;
                  &lt;img class="fishpics" src="img/fish3.jpg"&gt;
                  &lt;h3&gt;tekst&lt;/h3&gt;
                  &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aperiam itaque saepe molestias at iusto iure illo voluptate? Veniam, doloribus mollitia. Nihil, repellendus aut? Accusantium dolorum tempora, sunt minus itaque id?&lt;/p&gt;
              &lt;/figure&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see it doesnt look like i even tried yet but i have I just deleted my helpless tries.
  I thought to put them in a figure was best, but cant seem to make it happen.</p>