Как исправить flex-direction: column Как создать прогиб, чтобы первые два элемента были направлением строки последнего столбца

Question

Я пытаюсь создать div, который выполняет следующее: Слева есть дата.Рядом с ним кнопка редактирования.Под этими двумя элементами у меня есть текст.Я не могу получить текст под двумя элементами.

Я использовал flex для достижения этой цели и разбил каждый элемент на отдельный div.Последние элементы, которые я использовал flex-direction: column;чтобы убедиться, что он подходит под первые два.

Однако безуспешно.

/* _________________________
  This is the containers for my_thought page


*/
#blocks {
  display: flex;
  margin: 10px;


}

#blocks div{

flex: 0 0 100px;
padding: 10px 0;
text-align: center;

}



.one{order: 0;}; 
.two{order: 1;};
.three{
 order: 2;
 flex-direction: column;
   
};
/*________________________     */

    <div class="Thoughts" id="blocks">
              <div class="one">
              <h2>Date: 
                  <?php $date = strtotime($row['date_created']);
                       echo date('m/d/y', $date);
                       
                  

                  ?>
            
              </h2>
              </div>  
              <div class="justify-content-center .button .two">  
                <button type="submit" name="submit" class="btn btn-primary">Edit post</button>
              </div>
              
            <div class="three">
             <br>
            <p>
              <?php echo $row['text']; ?>
               
               </p>
            </div>

Я прилагаю фотографию, показывающую, как мой код выглядит в настоящее время.Что я делаю не так?

Вы можете найти фото выхода по следующей ссылке: https://drive.google.com/file/d/1Q90qE6mWHZtrcXnAXJdUuSUqHtHt31ig/view?usp=sharing

Answer 1

Спасибо за помощь.Я смог решить проблему.Я показываю код, который использовал, чтобы решить проблему.

#blocks {
  display: flex;
  margin: 10px;
  

}

#blocks div{

flex: 1 0 100px;
padding: 1px 0;
text-align: center;

}



.one{
  order: 0;
  margin: 10px;
 }; 
.two{order: 1;
  margin: 10px;

};

  <div class="Thoughts">
         <div id="blocks">
            
              <div class="one">
                  
              <h2>Date:
                  <?php $date = strtotime($row['date_created']);
                       echo date('m/d/y', $date);         
                   ?>
            
                </h2>
           
              </div>  
              <div class="justify-content-center .button .two">  
                <button type="submit" name="submit" class="btn btn-primary">Edit post</button>
              </div>
              
           </div>
            <p>
              <?php echo $row['text']; ?>
               
               </p>
            
        
     </div>