Fix topcoder-platform#2806 [MSFT-102] Challenges page: Screen readers announce the details of the challenge in an incorrect order.

Author: asadath1395

src/shared/components/challenge-listing/ChallengeCard/Prize/index.jsx

@@ -19,16 +19,16 @@ export default function Prize({
   withoutTooltip,
 }) {
   const component = (
-    <div>
+    <div styleName="prize-wrapper">
+      <div styleName="label">
+        {label}
+      </div>
       <div styleName="prize">
         <span styleName="symbol">
           {prizeUnitSymbol}
         </span>
         {totalPrize.toLocaleString()}
       </div>
-      <div styleName="label">
-        {label}
-      </div>
     </div>
   );
   if (withoutTooltip) return component;

src/shared/components/challenge-listing/ChallengeCard/Prize/style.scss

@@ -1,12 +1,18 @@
 @import "~styles/mixins";
 
+.prize-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
 .label {
   cursor: default;
   padding: 0 (2 * $base-unit);
   background: $tc-gray-neutral-light;
   font-size: 10px;
   color: $tc-gray-70;
   white-space: nowrap;
+  order: 2;
 
   @include xs-to-sm {
     display: inline-block;