change display order of available product attributes

Hi everybody, in my case I use 5 different color with product attribute in product details page, each of these attribute has its own stock quantity, I want to edit _ProductAttributes.cshtml and check if any attribute is "inStock" then show it first, or just show the ones are "inStock"
I want to specifically change "color square" part.
Any help or suggestion appreciated.
Regards,

Hi
I think something similar is already available out of the box with NopC.
The attributes combination that has no stock available will be disabled out of the box once the following configuration is changed
1. Under the product page section at /Admin/Setting/Catalog page, set the value of  Display type for attribute value when out of stock to Disable
2. At the product detail page, under the Inventory tab set the Inventory method  to Track inventory by product attributes and Allow only existing attribute combinations to true

After the changes, all the attribute combinations that are out of stock will be disabled automatically which means those can't be selected. Furthermore, the options will get a new class "disabled" so you can completely hide the disabled option using CSS. The selector for the disabled image attributes will be .attributes .attribute-squares .disabled{}