However I don;t get what the numbers in our code relate to. I guess it's columns however on our site it's a 4 col, reducing to a 3 and 2.
The Bootstrap grid is based on 12 total columns, which altogether will fill up the available horizontal space. The numbers here correspond to how many of those 12 columns each element should span. Combine that with the screen size abbreviations xs, sm, md, lg etc. to dictate how many columns should be spanned at each breakpoint, respectively.
In other words col-xs-12 will span all 12 columns at very small screen sizes (12/12 or full screen width), col-xs-6 will span 6 columns at very small screen sizes (6/12 or half the screen width), col-xs-4 will span 4 columns at very small screen sizes (4/12 or one third the screen width), col-xs-3 will span 3 columns at very small screen sizes (3/12 or one fourth the screen width), and so on. The number reflects the number of columns out of 12 will be filled by the element.
Also I can't see how to hide grid items on smaller screens so 1 row only remains.
I would like it that the row's don't wrap and only show 1 row.
The number of rows isn't responsive like this in Bootstrap, only the number of columns per row. If you want to hide rows, you have two options.
1. Write custom CSS, HTML or JavaScript. I can show you how to hide all but the first element in each row at very small sizes by adding the hidden-xs class to all items except the first index in the loop:
[wpv-item index=1]
<div class="row new-places-row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-n-props-new"]</div>
[wpv-item index=other]
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-n-props-new"]</div>
[wpv-item index=4]
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3">[wpv-post-body view_template="loop-item-in-n-props-new"]</div>
</div>
[wpv-item index=pad]
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3"></div>
[wpv-item index=pad-last]
<div class="hidden-xs col-sm-6 col-md-4 col-lg-3"></div>
</div>
However, that does not help you hide all the rows after the first row. That kind of depends on the rest of the page. If I could see it in the browser I might be able to suggest something.
2. Create a separate View that includes a maximum of one result, and include both Views on the page. Use Bootstrap's responsive utility classes to only show one View at a time. For example:
<div class="visible-xs-block">
...place the View with max one result here for small screens...
</div>
<div class="hidden-xs">
...place the View that allows many rows here for other screens...
</div>
Responsive utility class documentation: https://getbootstrap.com/docs/3.3/css/#responsive-utilities
Also how flexible is it? If I wish to change the breakpoints, or say on landscape iPad we wish to have 3 columns rather than the 2 showing?
The breakpoint classes are based on Bootstrap's predefined resolution breakpoints, in terms of numbers of pixels. Those resolutions are documented here:
https://getbootstrap.com/docs/3.3/css/#grid-media-queries
I suggest you do not attempt to manipulate those breakpoints unless you are an expert CSS programmer. That type of customization is not supported here in the forums.
In terms of specific devices and their sizes at different orientations, I'm not fully aware of those (there are probably multiple different resolutions for different iPad versions, for example) so I'm not sure about that. I can only tell you based on pixel dimensions which of these breakpoints will apply. Widths of 992px-1200px will use the md- class column counts. Widths of 768px-992px will use the sm- class column counts, and so on based on the definitions in the documentation link above. You can probably find the relevant iPad resolutions online to determine which breakpoints apply at different orientations.
