Provide Custom Alignment to ul-li elements [duplicate]

Question

The HTML, CSS is available in the link below.

https://jsfiddle.net/td5ruzh7/6/

I need to utilize the space shown under small sized ul elements and make the ul elements shown below each ul element to move upwards. Please see the screenshots for the current arrangement and the required one below.

Or if you can give me some better option to do so, please let me know.

current arrangement: required arrangement:

Answer 1

If you always have four categorys in one row, try this:

  <div>
        <div class="col">
            <ul>
              <li> <label> Category 1</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>    
            <ul>
              <li> <label> Category 5</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 9</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 2</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 6</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 10</label></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#"> Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 3</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 7</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 11</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
        <div class="col">
            <ul>
              <li> <label> Category 4</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 8</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
            <ul>
              <li> <label> Category 12</label></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
              <li><a href="#">Merchant1</a></li>
              <li><a href="#">Merchant2</a></li>
            </ul>
        </div>
    </div>

CSS:

div div.col {
    float: left;
}
ul {
    list-style-type: none;
    border: 1px solid red;
}