Reorder text by item

Question

Say I have it

div {
  position:absolute;
  top:0;
}

#right {
  left:50px;
}

#left {
  left:0;
}

<div id="right">World</div>
<div id="left">Hello</div>

Run codeHide result

When I go to select text from left to right, it behaves visually unintuitively. At least in chrome, the order in which the elements are considered from the selection seems to depend on the order of the elements. Is there a way to change this order without changing the order of the elements?

Answer 1

You can do this using CSS flexbox. All you have to do is change the values ​​of div id properties using CSS.

The code:

#blockContainer > div {
    border: 1px dashed #000;
}

#blockContainer {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
#right {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
#left {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

<div id="blockContainer">
    <div id="right">World</div>
    <div id="left">Hello</div>
</div>

Run codeHide result

JsFiddle - http://jsfiddle.net/hbk05z8n/

Answer 2

Try it.

div {
 float:left;
 padding-right:2px;
}

#right {
  left:50px;
}

#left {
  left:0;
}

<div>
  <div id="right">World</div>
  <div id="left">Hello</div>
</div>

Run codeHide result