How can I make the button appear after the paragraph in responsive mode?

June 21, 2023

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>

>Solution :

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