<script src="/javascript/2015/jquery-1.11.3.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://bevacqua.github.io/dragula/example/example.css" /> <!-- Latest Sortable --> <script src="//rawgit.com/rubaxa/Sortable/master/Sortable.js"></script> <div class="parent"> <label for="hy">Of all the lifestyle pages listed below, please rank the following based <br>on how frequently you use them. </label> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 column_1">Please drag and drop the following:</div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 column_2">My ranking based on frequency of use</div> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 column_3">I have never heard of this/these</div> </div> <div class="wrapper"> <div class="container list-group" id="C" width="20%" style="padding-right:0px"> <div class="list-group-item">Complex</div> <div class="list-group-item">Hypebeast</div> <div class="list-group-item">Highsnobiety</div> <div class="list-group-item">Modern Notoriety</div> <div class="list-group-item">Freshness</div> <div class="list-group-item">The Shade Room</div> <div class="list-group-item">Baller Alert</div> <div class="list-group-item">Other (fill in)</div> </div> <div class="container list-group" id="A" width="40%"> </div> <div id="B" class="container list-group" width="40%"> </div> </div> </div>