如何设置项目顺序HTML CSS

Question

当我看到760px以下的像素时，订单混乱了。我正在使用flexbox，因此如果它在760px以上，则它们并排放置。如果它们低于760像素，则将它们堆叠起来。一旦它们堆叠起来，那就是我出错的地方。

高于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;

Answer 2

您可以尝试其中的一种

.your_class {   flex-direction：行|反向行|栏|列反转；} 要了解有关flexbox的更多信息，请阅读此内容 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 继续做新的快乐