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
You’ll want to use the
@media
selector to specify the breaking point for when you want to go fromflex-direction: row
tocolumn
EDIT: changed media width to make it easier to demo
You can use a media query and set the button to appear after the text using the
order
property.jsFiddle demo
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