0

Consider this markup for a quote containing 3 parts: content, author's name and an image.

    <div class="quote">
      <div class="content"> <p>"Quote content goes here"</p> </div>
      <div class="quote-img"> <img src="https://www.outsystems.com/PortalTheme/img/UserImage.png?24179"> </div>
      <div class="author"> <p>Author's name</p> </div>
    </div>

Expected layout

Expected layout

Notice in small screens how the author div should be the footer, and in larger screens it should be aligned with the image.

How can I do this using flexbox? Here's what I have so far:

JSBin link

Carlos Torres
  • 419
  • 2
  • 9
  • 19
  • 3
    Flexbox can't do that, unless the height of the wrapper is known. – Paulie_D Oct 17 '16 at 16:11
  • 1
    You want a two dimension layout, `flexbox` is meant for column **or** row direction, not both. – Ricky Ruiz Oct 17 '16 at 16:11
  • 1
    Related - http://stackoverflow.com/questions/39141646/flexbox-layout-pattern-3-squares-ordered-1-large-left-2-small-right-stacked – Paulie_D Oct 17 '16 at 16:13
  • @Ricky_Ruiz But I understand a div can be both a container and an item, so I thought there was a trick to it. Not sure if flexbox is the best option, though. – Carlos Torres Oct 17 '16 at 16:16

0 Answers0