How to flip the display order of one of the elements individually using flex-CodePudding

I am learning CSS screen layout, and I want to use flex to change the display order of an element. I have found some tutorials on the Internet and still don't know how to write it, so I can simply change the second

, change the display order from left to right?

ul{
  display: flex;
  flex-direction:column;
  width: 300px;
}

<ul>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
  <li>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores doloribus dolor ipsum odit beatae voluptates culpa. Doloremque veniam labore pariatur!</p>
  </li>
</ul>

CodePudding user response：

if you looking for something like that

.flexed {
  width: 400px;
  height: 400px;
  border: 1px solid #c3c3c3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 50px;
}

.flexed div {
  width: 50px;
  height: 50px;
}
.reversed{
flex-direction: row-reverse;
}

<div style="text-align:center"> <h4>Without riversed row</h4> </div>
<div   >
  <div style="background-color:red;">1</div>
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  <div style="background-color:lightblue;">4</div>
</div>



<div style="text-align:center"> <h4>With riversed row</h4> </div>
<div  >
  <div style="background-color:red;">1</div>
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  <div style="background-color:lightblue;">4</div>
</div>

<div style="text-align:center"> <h4>With 2 only riversed row</h4> </div>
<div  >
  <div style="background-color:red;">1</div>
  <div >
  <div style="background-color:pink;">2</div>
  <div style="background-color:orange;">3</div>
  </div>
  <div style="background-color:lightblue;">4</div>
</div>

CodePudding user response：

The actual letters right to left is easily accomplished with the <bdo> element. Just wrap the text in a <bdo> and add the dir attribute and the value of "rtl".

<bdo dir='rtl'>Text to reverse</bdo>

The text is changed from Latin to English to clearly demonstrate the reversed text.

ul{
  display: flex;
  flex-direction:column;
  width: 300px;
}

<ul>
  <li>
    <p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
  </li>
  <li>
    <p><bdo dir='rtl'>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</bdo></p>
  </li>
  <li>
    <p>Did you know that more frozen bananas are sold right here on this boardwalk than anywhere in the OC? You burn down the storage unit? Oh, most definitely. What a fun, sexy time for you.</p>
  </li>
</ul>