Bootstrap/Mobile-Friendly - Text Wrapped Around Menu

HTML & CSS
1

Greetings,

I’m trying to use Bootstrap to make a Responsive mobile-friendly version of a page which contains a small sub-menu inside an article. I would like the text to wrap around the menu. Although for a mobile-friendly page, I would like the menu to drop down below the end of the article.

Here is the JSFiddle of my current page with the text wrapped around the menu: https://jsfiddle.net/8bxYr/151/

How can I do it in Bootstrap or other CSS where the menu stays where it is in the desktop version, but drops to the end of the article in a mobile device? Any advice would be greatly appreciated.

Thanks
Kind regards

2

You’d need two menus from the sound of it. One hidden for everything but mobile, and the other only show for medium and up screens.

Should be simple if you use their visibility classes.

3

Thanks for the response. This needs to be done using only one menu as this is a Responsive web design. The search engines can’t see two separate menus.

Is there another way to do this? It seems like it should be really simple, but I can’t figure it out yet. The links in this particular menu can be anywhere in the source code (above or below the content). It also doesn’t matter if it’s done using a Bootstrap way or direct CSS.

Thanks
Kind regards

4

If you wanted direct CSS (and you can forget IE9 and down) perhaps flexbox? Tinker with it - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Otherwise you are SOL (JS could probably do it for you but those that disable it…)

5

This seems to be a continuation of the question in your other thread and you can do it in the same way using the table algorithm.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.content {
	border: 1px solid #FF0000;
}
.sidebar {
	width: 200px;
	float: right;
	border: 1px solid #0000FF;
}
@media screen and (max-width:800px) {
	.content {
		display:table;
		width:100%;
		border-spacing:10px
	}
	.sidebar {
		display:table-footer-group;
		float:none;
	}
}
</style>
</head>

<body>
<div class="content">
		<h1 class="main">HEADER TITLE</h1>
		<div class="sidebar"> inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text inner text. </div>
		<div class="article">Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text Outer text.</div>
</div>
</body>
</html>

The inner text will display below the article content at smaller screen widths.

1 Like
6

Awesome! Thanks for the info, it works perfectly!

Kind regards

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.