Positioning of a div

Question

Good Night, I’m creating a website and I wanted to make a layout as if it were chess, a black div next to a white and down the other side, the only problem is that when decreasing to cell was to be black and a white and black and other white. only the white div does not reverse what makes it two white in half. I want the div2 to be on top of the div

 <div class="container-fluid">
    <div class="row">

        <div class="div1">
            <div class="d-flex justify-content-center">
            <a class="#" href="#"><img src="#" /> </a>
            </div>
        </div>

        <div class="div2">
            <div class="d-flex justify-content-center">
            <p class="text-justify ">
                Lorem Ipsum 
            </p>
            </div>
        </div>

    </div>
</div>

Answer 1

This is a very interesting problem and you can notice with it how sometimes working with height can be fun.

Since you want a chess-like layout, we responsibly cannot guarantee that by decreasing the screen the squares will be positioned exactly as we specified. An easy way to achieve this is by using .d-flex .flex-wrap bootstrap in a container. Then the 8 items will hold their position with a width calc(100% / 8) which is 12.5% block width. But that doesn’t solve the problem, because it depends on how you want the shape of chess to look, whether it decreases the number of columns or not.

About height, you can do a view-port study and analyze what would be the best way to define it. Then make the modifications by media queries.

A basic example that I set up and can help you:

 .item-line {
        height: 138.75px;
      }
      .item-box {
        position: relative;
        float: left;        
        width: 12.5%; /* calc(100% / 8)*/
        height: 100%;
        padding: 0;
      }
      .item-line:nth-child(even) .item-box:nth-child(even) {background: lime}
      .item-line:nth-child(even) .item-box:nth-child(odd) {background: fuchsia}      
      .item-line:nth-child(odd) .item-box:nth-child(even) {background: fuchsia}
      .item-line:nth-child(odd) .item-box:nth-child(odd) {background: lime}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
    <div class="d-flex flex-wrap item-line">
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
    </div>
    <div class="d-flex flex-wrap item-line">
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
    </div>
    <div class="d-flex flex-wrap item-line">
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
    </div>
    <div class="d-flex flex-wrap item-line">
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
      <div class="item-box">Flex item</div>
    </div>
  </div>

Answer 2

There are different ways to do what you need, some of them:

• You can rearrange the elements according to the device by making use of the property order flexbox;
• You can use the utilities of display Bootstrap and hide items that escape the desired order (according to the device);

I hope I’ve helped.