There is a list of marked items (maybe large) and you need to display it in the Responsive Form (bootstrap). If there are 22 points there should be something like:

  • xs: 1 column with all elements sm: 2 columns with 11 elements md: 3 columns 8, 8, 6 elements lg: 4 columns 6, 6, 6, 4 elements

I suppose that you need to calculate 4 two-dimensional arrays on the server, and in the template, make 4 blocks and display only one using visible-xs and hide the rest. Is it possible to do something better in the template? The variant above is not pleasant because of the need to make 4 blocks ...

    1 answer 1

    If you understand the bootstrap grid, it is very easy for them to use when generating almost any layouts. In your case, simply insert each element into a separate column; in this case, the problem can only be with a different height of elements. But it's pretty easy to solve.

    <!DOCTYPE html> <html> <head> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 1 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 2 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 3 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 4 </div> </div> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 5 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 6 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 7 </div> </div> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 8 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 9 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 10 </div> </div> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 11 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 12 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 13 </div> </div> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 14 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 15 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> 16 </div> </div> </div> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <div class="panel panel-default"> <div class="panel-body"> Продолжать не буду, думаю понятно что вставлять в луп </div> </div> </div> </div> </div> </body> </html>