skip to Main Content

I’m working on a page with an introduction text and a button on the right. It looks ok on desktop, however I’d like to move the button below the intro text in responsive mode. How can I go about doing that? Here’s what I came up with. I’ve also provided a link to jsfiddle here: https://jsfiddle.net/tpeob5a6/1/

Thanks for your time.

.container {
display: flex;
flex-wrap: nowrap;
}
<div class="container">
<div class="1">
<img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face" style="float:right;">
Intro text:

I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
</div>
</div>

2

Answers


  1. You’ll want to use the @media selector to specify the breaking point for when you want to go from flex-direction: row to column

    .container {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
    }
    
    img {
      float: right;
    }
    
    @media screen and (max-width: 600px) {
      .div1 {
        display: flex;
        flex-direction: column;
      }
      img {
        display: flex;
        flex-direction: column-reverse;
        order: 2;
      }
    }
    <div class="container">
      <div class="div1">
        <img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face">
        <p>
          Intro text: I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg
          fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
          tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
          I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!!
          I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!!
          I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!!
          I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
        </p>
      </div>
    </div>

    EDIT: changed media width to make it easier to demo

    Login or Signup to reply.
  2. You can use a media query and set the button to appear after the text using the order property.

    jsFiddle demo

    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    @media (max-width: 750px) {
    
      .container > div {
        display: flex;
        flex-direction: column;
      }
    
      img {
        order: 1
      }
    }
    <div class="container">
      <div class="1">
        <img src="http://www.google.com/images/srpr/logo3w.png" alt="Smiley face" style="float:right;">
        Intro text:
    
        I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertrytI'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! I'm riiiight!!! tedsffdg g fg gh g h hg fhg h gh gh gf h g hgh eertryt
      </div>
    </div>

    Also, avoid using numbers to start a class value. You may find that browsers ignore it. See my answer here: https://stackoverflow.com/a/31773673/3597276

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search