How to display RadListView right to left - asp.net

Question

I am using a Telerik RadListView (the elements are the same in a standard ASP.NET ListView) to show some data from a database. I want to show them in a tiled layout, but it loads the items from left to right.
For example - if I have 4 items in a row, the 5th item is shown on the left side. I tried to add dir="rtl" to all divs but that doesn't work.
How can I make this load items from right to left?
Here is my code:
<telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" AllowCustomSorting="True" AllowMultiFieldSorting="True" AllowNaturalSort="True" DataKeyNames="product_key" DataSourceID="DS_pure_product" PageSize="12">
<LayoutTemplate>
<div class="RadListView RadListViewFloated RadListView_Default" dir="rtl">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<telerik:RadDataPager ID="RadDataPager1" runat="server" SEOPagingQueryPageKey="CurrentPageKey" PageSize="12">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="Numeric" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<telerik:RadDataPagerButtonField FieldType="NextLast" LastButtonImageUrl="" NextButtonImageUrl="" PrevButtonImageUrl="" />
<%--<telerik:RadDataPagerGoToPageField />
<telerik:RadDataPagerNumericPageSizeField />--%>
</Fields>
</telerik:RadDataPager>
</div>
<div class="col-md-3">
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<div class="rlvFloated">
<div class="container-fluid" dir="rtl" style="text-align:right;">
<div class="row">
<div id="itemPlaceholder" runat="server">
</div>
</div>
</div>
</div>
</div>
</LayoutTemplate>
<ItemTemplate>
<div class="rlvI col-md-3 lv_items">
<asp:Button ID="SelectButton" runat="server" CausesValidation="False" CommandName="Select" CssClass="rlvBSel" Text=" " ToolTip="Select" />
<table class="tbl_product">
<tr>
<td>
<asp:Image ID="Image2" CssClass="img-responsive img_product" runat="server" ImageUrl='<%# Eval("product_img") %>' />
</td>
</tr>
<tr>
<td>
<asp:Image ID="Image1" runat="server" CssClass="img_product_logo" ImageUrl='<%# Eval("product_brand") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("product_name") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("product_price") %>' />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<EmptyDataTemplate>
<div class="RadListView RadListView_Default">
<div class="rlvEmpty">
There are no items to be displayed.</div>
</div>
</EmptyDataTemplate>
</telerik:RadListView>

Answer 1

After some conversation in the comments, it sounds like what you want is to right-align your content. In that case, float: right is what you're looking for.
The key is to have an overall container that will hold all of your data. Then, have another container for each row. This inner container is what you will float to the right. By not giving the inner container a width, it will grow to be as big as its children. If the inner container's width is less than that of its parent, it will show as aligning to the right side.
Below is an example of that.
.body {
height: 100px;
width: 500px;
background-color: red;
}
.child-container {
height: 100%;
float: right;
}
.child-1 {
height: 50%;
width: 100px;
float: left;
background-color: green;
}
.child-2 {
height: 50%;
width: 100px;
float: left;
background-color: orange;
}
.child-3 {
height: 50%;
width: 100px;
float: left;
background-color: blue;
}
<div class="body">
<div class="child-container">
<div class="child-1">
</div>
<div class="child-2">
</div>
<div class="child-3">
</div>
</div>
</div>