如何在弹出窗口中垂直显示结果

The result displays like in the image. I want to display it vertically. How can I do it ? I want the result to be like this:

I am using bootstrap modal to display this vertically. Please help me.

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h6 class="modal-title">Please Select Your Destination</h6>
</div>
<div class="modal-body">
  <?php
    $data="select * from destination";
    $res=mysql_query($data);                            
    while($recor=mysql_fetch_assoc($res))
    {
      $id=$recor['id'];
  ?>
  <h4><font color="red"><?php echo $recor['destination']; ?> </font> </h4>
  <div class="clearfix"></div>  
  <ul>
    <?php           
      $data1="select * from sub_destination where destination_id='$id'";
      $res1=mysql_query($data1);
      while($recor1=mysql_fetch_assoc($res1))
      {
        $subid_count=$recor1["id"];
        $counts=mysql_query("select * from hotels where sub_destination_id='$subid_count'");
        $counts_res=mysql_num_rows($counts);
    ?>

    <li class="col-md-2 col-sm-1"><a href="search-result.php?sub_id=<?php echo $recor1['id']; ?>&main_id=<?php echo $recor['id']; ?>" style="color: inherit;"><div class="dest-list"  ><?php echo $recor1['sub_destination']; echo "&nbsp; (".$counts_res.")";?></div></a> </li>

    <?php 
      }
    ?>
  </ul>
  <div class='clearfix'></div>
  <?php     
    }
  ?>

Both class "col-md-2" and "col-sm-1" in class attribute of list tag contains style property "float:left" that will display list tag value into horizontal line.

You can use flex-box like this :

.modal-body{ //your wrapper
  width: 100%;
  height: 400px; //specify height for the wrapper

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  align-items: stretch; 
}

But the problem is the carriage return in the ul, i think you should to split ul : increment a variable line by line and when the column have the required number of lines you create a new ul. If any one have an alternative solution...

I had similar problem some time ago.

Had list of car makes and had to have multicolumn menu. I solved this by using multicolumn layout that CSS provides.

This solution does not work for all browsers but suppoort is quite good (caniuse) and as IE has stopped supporting all other IE versions than edge (read all about it), maybe this will become cross browser solution some day.

Here is my solution: JS Fiddle

The main bit is the div holding the ul tag:

div {
    column-count: 4;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-rule: 0.1rem outset #aaaaaa;
    -moz-column-rule: 0.1rem outset #aaaaaa;
    -webkit-column-rule: 0.1rem outset #aaaaaa;
    width: 800px;
}