Moving a br element

Question

hey i want to know is how do you move a br element in a paragraph when it is on a different screen size. I know that sounds like a confusing/tricky question but let me explain:

This br element in the p tag right here. Say where the br element is now it is diplaying that when this site is view on a desktop. But i want to the view the break line (the br element) placed right before the word "break" when i view it on an smaller device such as a tablet or a phone or something.

<p>I am a <br/> Paragraph with a break line in it.</p>

Is it possible? If it is, is there a way to do it with javascript or css without actually changing the html code it self?

*" when i view it on an smaller device such as a tablet or a phone or something"* - The proper way of doing this is not placing a `
` element. It's setting your paragraph's `width` property according to the device's width, for example with `%` width, so the line will break on it's own. — Koby Douek, Jul 16 '17 at 06:00

score 3 · Accepted Answer · answered Jul 16 '17 at 06:24

You can do it this way.

<p>I am a <br class="sm-hide lg-show"/> Paragraph with a <br class="sm-show lg-hide"/>break line in it.</p>

.sm-hide {
  display: none;
}

.sm-show {
  display: block;
}

@media screen and (min-width: 961px) {
  .lg-hide {
    display: none;
  }

   .lg-show {
    display: block;
  } 
}

score 0 · Answer 2 · answered Jul 16 '17 at 06:22

<br/> tag is forcing HTML to have a line break, regardless of you browser or device. Here <br/> is not the proper way. If you really want, say, have a line break at different places according to your device (screen size), you could use CSS @media rules, such as

@media screen and (max-width: 480px) { /* your css code */ }

So that the above css rule only applies to screen whose width is smaller than 480px.

On the other hand, there are some very popular library/framework for you to design web both for desktop and/or mobile, such as Bootstrap.

Moving a br element

2 Answers2