On desktop the order of the grid row is:
Text | Picture
Picture | Text
Text | Picture
On mobile this becomes:
Text
Picture
Picture
Text
Text
Picture
Is there any way to change this order on mobile? to for example: Text Picture Text Picture Text Picture
Thank you!
You can use pull col-md-pull-* to your text.
so your text would be in the left and when it small, it will be in the top.
Or
You can use push col-md-push-* to your picture.
so your text would be in the right and when it small, it will be in the bottom.
check this out http://getbootstrap.com/css/#grid-offseting
Related
so I have this issue which I feel like it should be simple enough, but for some reason I am stumped...
I have this select dropdown that looks like so:
When the screen size gets smaller, the content text is hidden the smaller the screen gets. Is there a way to make the text wrap, so that all of it displayed in the dropdown box?
The caret is a background image with absolute positioning, so I will need to add some padding between the caret and where the text ends, but I want to make the text wrap (and the select box will become taller) so that it all fits and is visible.
Thanks!
I want to ask, how can I put text (<h3> on picture) in the middle of div and form? I want to have same space between edges of these two objects.
Source is on the picture below.
Thank you for your advices and have a nice day.
I'm working on a report where on wich page I need to show an image next to a text at the center. The problem is that I don't previously know the length of the text. Is there a way to acheive this.
Here is an image to make it clearer:
and here how it should look :
Using the module News Show Pro GK5 in Joomla 3, I did the following setup:
Amount of columns 1, amount of rows 1.
Image: float left,
Header: float right,
Text: float right
The image is set to responsive, wrap content and image auto-scale on.
The content appears as it should: the image on the left and the title and text next to it, on the right. Un fortunatelly, when the browser is resized to a smaller size, the title and text shrinks keeping its position to the right. I would like the title and text to move bellow the image when the browser width is small enough.
Any ideas to get this responsive behaviour on News Show Pro GK5?
To responsive News Show Pro GK4/5, you can overide your code, some things must be change:
img {
max-width:100%}
Change from style="width:50%;" to style="width:300px;"
I want to display a text behind an image. I've tried with vertical-align:top applied to the image. The first text line is placed behind the top of the image, but the second one appears on the bottom of the image.
Like here: JSFIDDLE
How to place the text that fits behind the image, and the rest below, filling the whole width?
Is this what you mean?
http://jsfiddle.net/K39Cm/1/
float:left;