How to make sure elements are below each other

Question

I want the image to be over the paragraph, but they aren't in this code. is it enough to place elements below each other in html and they will be displayed below each other or not? Is the dosplay flex and aligning affecting the position so that's why the paragraphs aren't below the images?

.wrapper {
  display: flex;
  width: 100%;
}

.div {
  width: 30%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 20%;
  height: 20%;
}

<div class="wrapper">
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
  </div>
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>

  </div>
  <div class="div div1">
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
  </div>
</div>

I forgot to mention this is used in React JS (because of that I use classname instead of class) — Jan, Jan 04 '21 at 16:26
you need flex-direction:column inside `.div` and not wrapper — Temani Afif, Jan 04 '21 at 19:51

Wais Kamal · Answer 1 · 2021-01-04T19:51:53.707

You can force a specific order on flex-items using the order property. Also set flex-direction to column to ensure your elements are stacked vertically.

.wrapper {
  width: 100%;
}

.div {
  display: flex;
  flex-direction: column;
  width: 30%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image {
  width: 20%;
  height: 20%;
  order: 1;
}

p {
  order: 2;
}

<div class="wrapper">
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia facere neque suscipit incidunt ipsa veniam error, quisquam modi rerum? Voluptatum quia voluptas porro eius asperiores natus velit consequatur explicabo nihil.</p>
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, ipsam odio libero ullam facere neque voluptate repudiandae totam dignissimos non ducimus magni! Quidem et saepe expedita, distinctio commodi a temporibus.</p>
    <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
  <div class="div">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia, vero fuga! Corporis odio quo eligendi pariatur alias architecto dignissimos. Dolorem, perferendis quidem. Animi modi maxime expedita ad minus a voluptatem.</p>
  <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fclearmindarts.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fbluesquare.jpg&f=1&nofb=1" class="image" />
  </div>
</div>

I don't see the use of order here, you are making the order to be the same as the html one — Temani Afif, Jan 04 '21 at 19:40

How to make sure elements are below each other

1 Answers1