html - 如何设置元素的顺序 HTML CSS

Question

当我到达 760 像素以下的任何内容时，顺序就会困惑。我正在使用 flexbox，我有它所以如果它超过 760px 那么它们并排。如果它们低于 760px，则它们会堆叠。一旦它们被堆叠起来，这就是我出错的地方。

760 像素以上:低于 760 像素:

高于 760px 是正确的，低于 760px，图像应该在文本之上。

我知道你必须使用顺序，但出于某种原因，我这边没有改变。

@media screen and (max-width: 760px)
{
    
    /*section :nth-child(1) {
        order: 2;
    }
    */
}
    

 <div>
        <h1>Museum of the Arts</h1>
        
        <figure>
            <img src="images/sunday.jpg" alt="sunday">
            <figcaption>Sunday Afternoon on the Island of La Grande Jatte</figcaption>
        </figure>
         
        <section>
            <p><span>Sunday Afternoon on the Island of La Grande Jatte</span>, painted in 1884, is one of Georges Seurat's most famous works. It is a leading example of pointillist technique, executed on a large canvas. Seurat's composition includes a number of Parisians at a park on the banks of the River Seine.
         </section>
        
         <section>
             <p><span>Nighthawks</span> is a 1942 oil on canvas painting by Edward Hopper that portrays people in a downtown diner late at night. It has been described as Hopper's best known work and one of the most recognizable paintings in American art Within months of its completion, it was sold to the Art Institute of Chicago on May 13, 1942 for $3,000.</p>
         </section>

        <figure>
            <img src="images/nighthawk.jpg" alt="Nigthawk">
            <figcaption>Nighthawk</figcaption>
        </figure>
         
   </div>
    

Answer 1

在媒体查询中添加:flex-direction: row-reverse;