Home>

[Question] I am practicing responsive design.flex-direction: column-reverse;I tried to reposition the photo and text using, but it doesn't work. Why?


〖↑ PC size screen〗


〖↑ I want to make this look like the following image. 〗

〖↑ I want to make this shape〗

〖↑ Butflex-direction: column-reverse;As a result of using, only the blue frame of No. 2 became like this. 〗
In the blue frames 1 and 3, the text is on the top and the image is on the bottom, but only the blue frame in the middle looks like this.


      
        
          
        
        
           At home even on business trips 
        <p>You can rest assured when i am on a business trip or when you move to a new place. Find rooms and boutique hotels that have been rated 5 stars by other business travelers.</p>
           Search for accommodation with work space 
        
      
      
        
          
        
        
           Unite the hearts of the team 
        <p>Participate in ramen making classes and canoe lessons. You can experience the unexpected aspects of your colleagues that you can't usually see in the office and connect them at a deep level.</p>
           Search for "Experience" on Airbnb 
        
      
      
        
          
        
        
           A space that stimulates creativity 
        <p>Why don't you change your mood off-site for a day after boiling? Increase your team's productivity in an inspirational environment.</p>
           See accommodations with Wi-Fi 
        
      
  
.contents-wrapper {
  width: 100%;
  height: 1590px;
  margin-top: 60px;
}
.description-container {
  width: 100%;
  height: 500px;
  border: solid 1px blue;/* blue frame * /
  display: flex;
  justify-content: space-evenly;
}
.description-container: nth-child (even) {
  flex-direction: row-reverse;
}
.description-icon {
  width: calc (42% -30px);
  height: calc (100% -20px);
  border: solid 3px yellow;
}
.description {
  width: calc (58% -30px);
  height: calc (100% -20px);
  padding-left: 155px;
  padding-right: 155px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/ * Responsive CSS * /
  .contents-wrapper {
    height: 2500px;
  }
  .description-container {
    height: 700px;
    flex-direction: column-reverse;/* ← I don't know here * /
  }
  .description-icon {
    width: 95%;
    height: 50%;
    margin: 10px auto;
  }
  .description {
    width: 95%;
    height: 40%;
    margin: 10px auto;
  }


I'm sorry it was long. that's all, thank you very much.

  • Answer # 1

    Detail.description-containerThan.description-container: nth-child (even)I think the cause is that it is higher..description-containerYou should increase the level of detail of the person.

    For example

    .contents-wrapper .description-container {
        height: 700px;
        flex-direction: column-reverse;
      }

    Detail-CSS: Cascading Stylesheets | MDN