1

Hi i am making a website for school. I have some text writting in 3 different articles. Now I want to change the order of those 3 articles using css (tablet modeenter image description here). Can anyone help me? The first and third articles needs to be swapped. order: 1 , order:2 ,order:3; dont work. Does anyone else have a solution?

<section class="text-wrap">

<article id="art1">

<header class="inno"> Innovation 1, Running
</header>
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
<p>   </p>
<p>  </p>
<p> . </p>

<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it! </p>
<a href="https://www.run4free.nl/"> More info? Click here</a>
</footer>


 </article>





<article id="art2">
<header class="inno"> Innovation 2, Bowling
</header>
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
<p>Tg.</p>
<p> </p>
<p>T</p>

<footer>
<p>
Fun Fact: The risk of a false score went down drasticly after this invention. </p>
<a href="https://www.bowlingcentrum.nl/">Make a reservation for bowling here. </a>
</footer>

</article>




<article id="art3">
<pre> <header class="inno"> Innovation 3, Photo finishes. </pre>

</header>
<a href="https://www.horsegear.nl/">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/996/071/113833866_display_image.jpg?1307423230" alt="Horse racing, Copyright belongs to bleacherreport.com">
</a>
<p>.</p>
<p></p>
<p>. </p>
<p> </p>
</article>
<footer>
These photo finieshed were invented in the 1940s. A long time ago!
<a href="https://en.wikipedia.org/wiki/Photo_finish"> More info? Click here</a>
</footer>
</article>


</section>

css :

@media screen and (min-width: 481px) and (max-width:1279px) /* tablet */
{
    .text-wrap {
        
    }
}
NOOIT
  • 35
  • 3
  • Please create a [**Minimal** reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) – ATP Oct 26 '22 at 18:44
  • 1
    Does this answer your question? [Switching the order of block elements with CSS](https://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css) – Asmoth Oct 26 '22 at 18:48

1 Answers1

1

Try using display: flex on the parent element so that you can use order:

.text-wrap {
  display: flex;
  flex-direction: column;
}

#art1 {
  order: 3;
}

#art2 {
  order: 2;
}

#art3 {
  order: 1;
}
<section class="text-wrap">

  <article id="art1">
    art1 goes here
  </article>

  <article id="art2">
    art2 goes here
  </article>

  <article id="art3">
    art3 goes here
  </article>

</section>
John Fish
  • 1,060
  • 1
  • 7
  • 13