How to move text to second col after filling first col?-CodePudding

I have two columns here. After vertically filling first column, how to make text continue in second column ? I tried playing with white space, but no use. Any help please.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div >
  <div >
    <div >
      <div>
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div ></div>
  </div>
</div>

</body>
</html>

.col{
        height: 200px;
    }

This is current result

This is required result

CodePudding user response：

Easiest way to do it is the use of column-count-property in combination with column-fill: auto. Unfortunatly I have not found any documentation that bootstrap implemented this themself.

div {
  column-count: 2;
  column-fill: auto;
  height: 200px;
}

<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

CodePudding user response：

A more generic way to do it is to use "flex".
Add " display:flex; flex-direction:column " to the container div and use the "flex-wrap:wrap" property(like the "wrap text" in excel) .

    .flex-container{
        display:flex;
        flex-direction:column;
        flex-wrap:wrap;
        height:200px
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div >
  <div >
    <div >
      <div >
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
        <p>f</p>
        <p>g</p>
      </div>
    </div>
    <div ></div>
  </div>
</div>

</body>
</html>

CodePudding user response：

You can simply put the f,g in the second col.(Not sure if you are trying to do this.)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div >
  <div >
    <div >
      <div>
        <p>a</p>
        <p>b</p>
        <p>c</p>
        <p>d</p>
        <p>e</p>
   
      </div>
    </div>
    <div >
      <p>f</p>
      <p>g</p>
     </div>
  </div>
</div>

</body>
</html>