Flexbox and rtl

Question

I have following layout, but in rtl copy button goes to the left. How do I keep copy button on the right like it was no rtl?

I tried some solutions here but I cannot make it work: flexbox align column left and right

.data {
  display: flex; /* displays flex-items (children) inline by default */
  align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  /*float: left; not necessary*/
}

.copy {
  color: #ccc;
  /*display: inline-block; not necessary*/
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  /*float: right; not necessary*/
  margin-left: 10px; /* design purposes */
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

Answer 1

Use the order property.

By default, all flex items are set to order: 0, which means their appearance in the source dictates their order in the layout.

You can change the visual order of flex items using positive and negative integers.

.data {
  display: flex;
  align-items: flex-start;
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
}

.copy {
  order: -1; /* NEW */
  color: #ccc;
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

Here's a more complete explanation and examples: https://stackoverflow.com/a/36118012/3597276

Of course, you can also achieve what you want by simply switching the order of the elements:

.data {
  display: flex;
  align-items: flex-start;
  max-width: 400px;
  direction: rtl;
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
}

.copy {
  color: #ccc;
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
}

<div class="data">
  <div class="copy">COPY</div><!-- now this element is listed first -->
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
</div>

Answer 2

You can just apply flex-direction: row-reverse to your flex container. In this case you don't have to set order for every flex item.

.data {
  display: flex; /* displays flex-items (children) inline by default */
  align-items: flex-start; /* vertical alignment / optional but recommended / if you don't want that flex-items match in height, which by default they do (default value of stretch, which makes them fill the flex-containers height and where the height of all items is dictated by the height of the "tallest" one) / you can also try the value of center */
  max-width: 400px;
  flex-direction: row-reverse; /* new */
}

.code {
  color: #fff;
  margin: 0;
  padding: 8px !important;
  line-height: 1.2;
  font-size: 11px;
  background: #bbb;
  border: 1px solid #333;
  word-wrap: break-word;
  /*float: left; not necessary*/
}

.copy {
  color: #ccc;
  /*display: inline-block; not necessary*/
  padding: 3px !important;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #999;
  /*float: right; not necessary*/
  margin-left: 10px; /* design purposes */
}

<div class="data">
  <p class="code">Praesent molestie. Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla.</p>
  <div class="copy">COPY</div>
</div>

Please note that direction: rtl should be used for languages written from right to left (like Hebrew or Arabic), not for reversing your layout.